<template>
  <div class="card_task">
    <el-card class="task_card">
      <div slot="header" class="clearfix">
        <span>新建任务</span>
        <el-button style="float: right; padding: 3px 0" type="text" class="el-icon-close" @click.native="togzt"></el-button>
      </div>
      <div class="topcard">
        <div class="left_card">
          <span>任务名称</span>
          <el-form ref="form" :model="form" label-width="80px">
            <el-input v-model="form.value" placeholder="请输入内容"></el-input>
          </el-form>
          <span>任务名称</span>
          <div class="block">
            <el-date-picker v-model="form.value2" type="datetime" placeholder="选择日期时间" style="width:100%;"></el-date-picker>
          </div>
          <span>优先级</span>
          <el-row>
            <el-button type="danger" circle>高</el-button>
            <el-button type="warning" circle>中</el-button>
            <el-button circle>低</el-button>
            <el-button type="info" circle>无</el-button>
          </el-row>
        </div>
        <div class="right_card">
          <span>开始时间</span>
          <el-form ref="form" :model="form" label-width="80px">
            <el-input v-model="form.value3" placeholder="请输入内容"></el-input>
          </el-form>
          <span>结束时间</span>
          <div class="block" style="margin-right:20px;">
            <el-date-picker v-model="form.value2" type="datetime" placeholder="选择日期时间" style="width:100%;"></el-date-picker>
          </div>
        </div>
      </div>
      <footer>
        <p>任务描述</p>
        <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="form.textarea"></el-input>
        <el-row>
          <el-col :span="24">
            <div class="buttons">
              <a href="#" style=" color: #fff;" type="buttton">确定</a>
              <a href="#" style=" color: #000;background-color: #f5f6f9;" type="button">取消</a>
            </div>
          </el-col>
        </el-row>
      </footer>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "card_task",
  data() {
    return {
      form: {
        value: "",
        value2: "",
        value3: "",
        textarea: "",
      },
    };
  },
  methods: {
    togzt() {
      this.$router.push("/office/gzt");
    },
  },
  components: {},
};
</script>

<style scoped lang='scss'>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.card_task {
  background-color: #f5f6f9;
  width: 100%;
  position: relative;
  height: 100%;
  padding: 40px 380px;

  .task_card {
    width: 700px;
  }
  .topcard {
    display: flex;
    padding: 30px;
    .left_card {
      width: 300px;
      height: 300px;

      margin-right: 20px;
      span {
        display: block;
        font-size: 13px;
        margin: 12px 0;
      }
    }
    .right_card {
      width: 280px;
      height: 300px;

      span {
        display: block;
        font-size: 13px;
        margin: 12px 0;
      }
    }
  }
  footer {
    p {
      font-size: 12px;
      margin-bottom: 20px;
    }
  }
}
.buttons {
  height: 30px;

  text-align: right;
  margin-top: 30px;
  a {
    text-decoration: none;
    width: 52px;
    height: 30px;
    padding: 5px 15px;
    color: #fff;
    margin: 0 10px;
    border-radius: 3px;
    background-color: #3e84e9;
    border-color: #3e84e9;
  }
}
</style>
